<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">
<!--  ``-->
  <h1 v-if="isShow">{{ msg }}</h1>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      msg: null,
      list: ['a', '123', 'apple'],
      isShow: false
    },
    // 生命周期, 钩子函数
    beforeCreate() {
      console.log('beforeCreate')
    },
    created() {
      // ajax
      console.log(this.msg)
      this.msg = 'created'
      console.log(this.msg, '=====')
      console.log('created')
    },
    beforeMount() {
      this.msg = 'beforeMount'
      console.log('beforeMount')
    },
    mounted() {
      this.msg = 'mounted'
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate', this.msg)
    },
    updated() {
      console.log('updated', this.msg)
    },
    beforeDestroy() {
      console.log('beforeDestroy', this.msg)
    },
    destroyed() {
      console.log('destroyed', this.msg)
    }
  })

</script>

<!--
数据驱动
-->

</body>
</html>
